<style scoped>
</style>

<template>

  <div>

    <Modal
      v-model="IsModalShow"
      :title="modalFormTitle"
      :mask-closable="false"
      @on-cancel="cancel"
      width="600"
    >
      <Form
        ref="modalForm"
        :model="modalForm"
        :label-width="80"
        value=true
        style="padding: 3px 60px"
      >
        <Form-item
          label="设备名"
          prop="devName"
          :rules="{required: true, message: '必填,1-10位字符',min:1,max:10, trigger:'blur',type:'string'}"
        >
          <Input v-model="modalForm.devName"></Input>
        </Form-item>
        <Form-item
          label="IMEI"
          prop="imei"
          :rules="{required: true, message: '必填', trigger:'blur',type:'string',pattern: /^\w+$/}"
        >
          <Input v-model="modalForm.imei"></Input>
        </Form-item>

        <Form-item
          label="部门"
          prop="depCascader"
          :rules="{required: true, message: '必选', trigger:'change', type:'array'}"
        >
          <Cascader
            :data="deptCasc"
            v-model="modalForm.depCascader"
            :filterable="true"
            change-on-select
            transfer
            placeholder="选择部门"
          ></Cascader>
        </Form-item>
        <Form-item
          label="型号"
          prop="model"
          :rules="{required: true, message: '必填,1-10位字符',min:1,max:10, trigger:'blur',type:'string'}"
        >
          <Input v-model="modalForm.model"></Input>
        </Form-item>
        <Form-item
          label="SIM卡号"
          prop="sim"
          :rules="{required: true, message: '必填', trigger:'blur',type:'string',pattern: /^\d+$/}"
        >
          <Input v-model="modalForm.sim"></Input>
        </Form-item>
        <Form-item
          label="制造单位"
          prop="manufac"
          :rules="{required: true, message: '必填,1-10位字符',min:1,max:10, trigger:'blur',type:'string'}"
        >
          <Input v-model="modalForm.manufac"></Input>
        </Form-item>
        <Form-item label="制造日期">
          <DatePicker
            type="date"
            v-model="modalForm.manuDate"
          ></DatePicker>
        </Form-item>
        <Form-item
          label="位号编码"
          prop="installCode"
          :rules="{required: true, message: '必填,1-10位字符',min:1,max:10, trigger:'blur',type:'string'}"
        >
          <Input v-model="modalForm.installCode"></Input>
        </Form-item>
        <Form-item
          label="安装路段"
          prop="installRoad"
          :rules="{required: true, message: '必填,1-10位字符',min:1,max:10, trigger:'blur',type:'string'}"
        >
          <Input v-model="modalForm.installRoad"></Input>
        </Form-item>
        <Form-item label="安装日期">
          <DatePicker
            type="date"
            v-model="modalForm.installDate"
          ></DatePicker>
        </Form-item>
        <Form-item
          label="经度"
          prop="lng"
          :rules="{required: true, message: '必填', trigger:'blur',type:'string',pattern:  /^[\-\+]?(0?\d{1,2}\.\d{1,5}|1[0-7]?\d{1}\.\d{1,5}|180\.0{1,5})$/}"
        >
          <Input v-model="modalForm.lng"></Input>
        </Form-item>
        <Form-item
          label="维度"
          prop="lat"
          :rules="{required: true, message: '必填', trigger:'blur',type:'string',pattern: /^[\-\+]?([0-8]?\d{1}\.\d{1,5}|90\.0{1,5})$/}"
        >
          <Input v-model="modalForm.lat"></Input>
        </Form-item>
      </Form>
      <div slot="footer">
        <Button
          type="default"
          @click="cancel"
        >关闭</Button>
        <Button
          type="primary"
          :loading="modalForm_loading"
          @click="saveForm('modalForm')"
        >保存</Button>
      </div>
    </Modal>
  </div>

</template>

<script>
import { getDeptCascader } from "@/api/system";
import { updateDevice, saveDevice } from "@/api/device";
import { formatDate } from "@/libs/util";
export default {
  props: {
    parentForm: {
      type: Object,
      default: function() {
        return {};
      }
    },
    modalShow: {
      type: Boolean,
      default: true
    },
    modalFormTitle: {
      type: String,
      default: "添加设备"
    }
  },
  data() {
    return {
      IsModalShow: false,
      modalForm: {},
      modalForm_loading: false,
      deptCasc: []
    };
  },
  watch: {
    modalShow(curVal, oldVal) {
      if (curVal) {
        let tempParent = JSON.parse(JSON.stringify(this.parentForm));
        if (tempParent.depCascader) {
          tempParent.depCascader =
            tempParent.depCascader + "," + tempParent.deptId;
          tempParent.depCascader = tempParent.depCascader
            .split(",")
            .map(val => parseInt(val));
        } else {
          tempParent.depCascader = [];
        }
        this.modalForm = tempParent;
      }
      this.IsModalShow = curVal;
    }
  },
  created() {
    this.getDeptCascList();
  },
  mounted() {},
  methods: {
    async getDeptCascList() {
      let res = await getDeptCascader({ id: 0 });
      this.deptCasc = res.data;
    },
    cancel() {
      this.$emit("listenModalForm");
    },
    saveForm(name) {
      this.$refs[name].validate(async valid => {
        if (valid) {
          this.modalForm_loading = true;
          let params = JSON.parse(JSON.stringify(this.modalForm));
          let arr = this.modalForm.depCascader;
          params.depCascader = arr.join(",");
          params.deptId = arr[arr.length - 1];
          if (
            params.installDate &&
            this.modalForm.installDate instanceof Date
          ) {
            let installStr = formatDate(this.modalForm.installDate);
            params.installDate = installStr;
          }
          if (params.manuDate && this.modalForm.manuDate instanceof Date) {
            let manuStr = formatDate(this.modalForm.manuDate);
            params.manuDate = manuStr;
          }

          try {
            let result;
            if (params.devId) {
              result = await updateDevice(params);
            } else {
              result = await saveDevice(params);
            }

            if (result.code == "0") {
              this.$Message.success("提交成功!");
              this.$emit("listenModalForm");
              this.$emit("refreshTableList");
            } else {
              this.$Message.error(result.msg);
            }
          } catch (e) {
            this.$Message.error("服务器异常，稍后再试");
          }
          this.modalForm_loading = false;
        } else {
          this.$Message.error("表单验证失败!");
        }
      });
    }
  }
};
</script>
